<script setup>
/**
 * 正式项目引入组件模块
 * views为模块组件集合（每个组件文件夹内的module.vue）
 */
import { ref, onMounted, toRefs, computed } from 'vue'
import {unit2} from './unit.js'
import module from './module.vue';//递归自己
const props = defineProps({
    config: {
        type: Object,
        default: {}
    },
    modelValue: {
        type: Array,
        default: []
    },
    views: Object
});
//向父级传递消息
const emits = defineEmits(['update:modelValue'])

const mobileConfig = computed({
  get: () => props.modelValue,
  set: value => emits('update:modelValue', value)
})


</script>
<template>
    <div v-for="(item, index) in mobileConfig" :key="item.key" :class="[item.path!='container'?'itemrow':'m-container', {mTitle:item.type=='title'}]" :style="
            item.path!='container'?
            { padding: config.padding1 + 'px ' + config.padding2 + 'px'}:
            {
                width: unit2(item.width, item.width_unit),
                height: unit2(item.height, item.height_unit),
                fontSize: unit2(item.fontSize, 'px'),
                color: item.color,
                backgroundColor: item.backgroundColor,
                backgroundImage: `url(${item.bg})`,
                padding: `${unit2(item.paddingTop, 'px')} ${unit2(item.paddingRight, 'px')} ${unit2(item.paddingBottom, 'px')} ${unit2(item.paddingLeft, 'px')}`,
                margin: `${unit2(item.marginTop, 'px')} ${unit2(item.marginRight, 'px')} ${unit2(item.marginBottom, 'px')} ${unit2(item.marginLeft, 'px')}`,
                borderColor: item.borderColor,
                borderStyle: 'solid',
                borderWidth: unit2(item.borderWidth, 'px'),
                borderRadius: unit2(item.borderRadius, 'px'),
            }
        ">

            <component v-if="item.path!='container'" :is="views[item.path]" :config="item">
            </component>

            <module v-else :config="config" v-model="item.children" :views="views"></module>

    </div>
</template>
<style scoped>

.mTitle + * {padding-top: 0 !important;}


</style>
<style>
</style>